import { useEffect, useRef, useState } from "react";
import styles from "./style.module.css"

type DataItemProps = {
    value?: number;
    text?: string;
    className?: string;
    onClick?: () => void
}


function DataItem(props: DataItemProps) {
    const value = props.value ?? 0;
    const text = props.text ?? '';
    const className = props.className

    const [displayValue, setDisplayValue] = useState(0)

    useEffect(() => {
        // if (displayValue >= value) return
        // const timer = setTimeout(() => {
        //     setDisplayValue(prev => prev + value / 20)
        //     clearTimeout(timer)
        // }, 16.6)

        // if (displayValue >= value) {
        //     setDisplayValue(value)
        //     return
        // }
        // const timer = setInterval(() => {
        //     setDisplayValue(prev => prev + value / 20)
        // }, 16.6)
        // return () => {
        //     clearInterval(timer)
        // }

        if (displayValue >= value) {
            setDisplayValue(value)
            return
        }
        requestAnimationFrame(() => {
            setDisplayValue(prev => Math.ceil(prev + value / 20))
        })
    }, [displayValue, value])

    return (
        <div
            className={"w-[33%] text-center " + className}
            onClick={props.onClick}
        >
            {value !== 0 ?
                <p className={styles.DataItemValue}>{displayValue}</p> :
                <div className="skeleton w-[100%] h-[53px]"></div>
            }
            {text !== '' ?
                <p className={styles.DataItemText}>{text}</p> :
                <div className="skeleton w-[100%] h-[39px]"></div>
            }
        </div >
    )
}
export default DataItem